<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChromaDB 文档统计</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <script src="/static/vue.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">ChromaDB 文档统计信息</h1>
        <div class="card mb-4">
            <div class="card-body">
                <p class="mb-2">文档总数: <span class="badge bg-primary">{% raw %}{{ document_count }}{% endraw %}</span></p>
                <p class="mb-2">嵌入维度: <span class="badge bg-secondary">{% raw %}{{ embedding_dimension }}{% endraw %}</span></p>
                <!-- 新增展示信息 -->
                <p class="mb-2">示例文档ID: <span class="badge bg-success">{% raw %}{{ example_ids[0] }}{% endraw %}</span></p>
                <p class="mb-2">示例文档内容: <span class="badge bg-info" style="max-width: 100%; word-wrap: break-word;">{% raw %}{{ example_documents[0] }}{% endraw %}</span></p>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <h2 class="card-title h4">所有输入文档列表</h2>
                <ul class="list-group list-group-flush">
                {% for doc, id in zip(documents, ids) %}
                    <li class="list-group-item">{{ id }}:{{ doc }}</li>
                {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    
    <script src="/static/bootstrap.bundle.min.js"></script>
    <script>
        new Vue({
            el: '.container',
            data: {
                document_count: 0,
                embedding_dimension: 0,
                example_ids:[''],
                example_documents:[''],
            },
            async mounted() {
                try {
                    const { fetchApi } = await import('/static/api.js');
                    const urlParams = new URLSearchParams(window.location.search);
            const id = urlParams.get('id');
            const data = await fetchApi(`/chroma_stats?id=${id}`);
                    console.log(data);
                    this.document_count = data.document_count;
                    this.embedding_dimension = data.embedding_dimension;
                    this.example_documents = data.example_documents;
                    this.example_ids = data.example_ids;
                } catch (error) {
                    console.error('请求出错:', error);
                }
            }
        });
    </script>
</body>
</html>